<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
    <title>8-预渲染介绍</title>
</head>

<body>
    <div>
        <h1>预渲染概述</h1>
        <p>1.预渲染是指数据和HTML的拼接在服务器提前完成</p>
        <p>2.预渲染可以使 SEO 更加友好</p>
        <p>3.预渲染回带来更好的用户体验，可以无需运行 JavaScript 即可查看应用程序UI</p>
    </div>
    <div>
        <h1>预渲染的两种形式</h1>
        <p>1.在Next.js 中支持两种形式的预渲染：静态生成和服务器端渲染</p>
        <p>2.静态生成和服务器渲染是生成 HTML 的时机不同</p>
        <p>3.静态生成：静态生成是在构建时生成HTML，以后的每个请求都公用构建时生成的HTML</p>
        <p>4.服务器端渲染：服务器端渲染是在请求时生成HTML,每个请求都会重新生成HTML</p>
    </div>
    <div>
        <h1>两种预渲染方式的选择</h1>
        <p>1.Next.js允许每个开发者为每个页面选择不同的预渲染方式，不同的预渲染方式拥有不同的特点，应根据场景就行渲染</p>
        <p>2.但是大多数页面建议使用静态生成</p>
        <p>3.静态生成一次构建，反复使用，访问速度快，因为页面都是事先生成好的</p>
        <p>4.适用场景：营销页面，博客文章，电子商务产品列表，帮助和文档</p>
        <p>5.服务器渲染访问速度不如静态生成快，但是每次请求都会重新渲染，所以适用数据频繁更新的页面或者页面内容随请求变化而变化的页面</p>
    </div>
</body>

</html>